<template>
    <!-- 仪表盘 -->
    <div class="app-container">
        <el-row :gutter="30" :style="{height: '400px', width: '100%'}">
            <div class="chart" ref="chart" :style="{height:'100%',width:'100%'}"></div>
        </el-row>
    </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/views/dashboard/mixins/resize'

export default {
    name: 'ChartGauge',
    mixins: [resize],
    data() {
        return {
            chart: null
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs['chart'], 'macarons')
            this.setOptions(this.chartData)
        },
        setOptions() {
            this.chart.setOption({
                title: {
                    text: '工作完成率',
                    left: 'center'
                },
                tooltip: {
                    formatter: "{a} <br />{b} : {c}%" //a系列名称 b数据项名称 c数值
                },
                series: [
                    {
                        name: '业务指标',
                        type: 'gauge',
                        detail: {
                            formatter: '{value}%'
                        },
                        data: [
                            {
                                value: 50,
                                name: '完成率'
                            }
                        ]
                    }
                ]
            });
        }
    }
}
</script>